<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理 - 人参管理系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
</head>
<body>
<jsp:include page="../common/header.jsp"/>
<div class="container-fluid">
    <div class="row">
        <main class="col-md-10 ms-sm-auto col-lg-10 main-content">
            <div class="pt-3 pb-2 mb-3 border-bottom d-flex justify-content-between align-items-center">
                <h1 class="h2">用户管理</h1>
                <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addUserModal">
                    <i class="fa-solid fa-plus-circle"></i> 添加用户
                </button>
            </div>
            <div class="row mb-4">
                <div class="col-md-3">
                    <div class="card">
                        <div class="card-body">
                            <h5 class="card-title">累计创建用户数</h5>
                            <p class="card-text display-6">${userCount}</p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 筛选表单 -->
            <form class="row g-3 mb-3" method="get" action="">
                <div class="col-md-3">
                    <label class="form-label">角色</label>
                    <select class="form-select" name="role">
                        <option value="">全部</option>
                        <c:forEach items="${roleList}" var="roleItem">
                            <option value="${roleItem}" <c:if test="${selectedRole == roleItem}">selected</c:if>>${roleItem}</option>
                        </c:forEach>
                    </select>
                </div>
                <div class="col-md-3 align-self-end">
                    <button type="submit" class="btn btn-primary">筛选</button>
                    <a href="${pageContext.request.contextPath}/admin/user_management" class="btn btn-secondary">重置</a>
                </div>
            </form>
            <!-- 用户列表表格 -->
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">用户列表</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>用户ID</th>
                                    <th>用户名</th>
                                    <th>角色</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <c:forEach items="${userList}" var="user">
                                    <tr>
                                        <td>${user.id}</td>
                                        <td>${user.username}</td>
                                        <td>${user.role}</td>
                                        <td>${user.createTime}</td>
                                        <td>
                                            <button class="btn btn-danger btn-sm" onclick="deleteUser(${user.id})">删除</button>
                                        </td>
                                    </tr>
                                </c:forEach>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
            <!-- 添加用户弹窗 -->
            <div class="modal fade" id="addUserModal" tabindex="-1">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">添加用户</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                        </div>
                        <div class="modal-body">
                            <form id="addUserForm">
                                <div class="mb-3">
                                    <label class="form-label">用户名</label>
                                    <input type="text" class="form-control" name="username" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">密码</label>
                                    <input type="password" class="form-control" name="password" required>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">角色</label>
                                    <select class="form-select" name="role" required>
                                        <c:forEach items="${roleList}" var="roleItem">
                                            <option value="${roleItem}">${roleItem}</option>
                                        </c:forEach>
                                    </select>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary" onclick="submitAddUser()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script>
function submitAddUser() {
    var form = $('#addUserForm');
    var data = {
        username: form.find('input[name="username"]').val(),
        password: form.find('input[name="password"]').val(),
        role: form.find('select[name="role"]').val()
    };
    $.ajax({
        url: '${pageContext.request.contextPath}/admin/addUser',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json',
        success: function(res) {
            $('#addUserModal').modal('hide');
            location.reload();
        },
        error: function() {
            alert('添加失败，请重试');
        }
    });
}

function deleteUser(userId) {
    if(confirm("确定要删除该用户吗？")) {
        $.ajax({
            url: '${pageContext.request.contextPath}/admin/deleteUser',
            type: 'POST',
            data: { id: userId },
            success: function(res) {
                if(res === 'success' || (res.success && res.success === true)) {
                    alert("删除成功！");
                    location.reload();
                } else {
                    alert("删除失败！");
                }
            },
            error: function() {
                alert("请求失败，请重试！");
            }
        });
    }
}
</script>
</body>
</html> 